<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Carousel from './c-cpns/carousel/index.vue';
import Search from './c-cpns/search/index.vue';
import Level from './c-cpns/level/index.vue';
import HospitalCard from './c-cpns/HospitalCard/index.vue';
import HospitalRight from './c-cpns/HospitalRight/index.vue';
import { reqHospitalList } from '@/services/modules/home';
import type { HospitalContent, HospitalResDataInterface } from '@/services/modules/home/type';

import { useRouter } from 'vue-router';
// 分页
const currentPage = ref<number>(1);
const pageSize = ref<number>(3);
// 存储已有的医院数据
const hasHospitalList = ref<HospitalContent>([]);
const hospitalTotal = ref<number>(0);
// 点击了 等级 或者 地区
// const levelCurrent = ref<string>('');
// const regionCurrent = ref<string>('');
// 获取已有的医院列表
const fetchHospitalListData = async () => {
  const res: HospitalResDataInterface = await reqHospitalList(currentPage.value, pageSize.value);
  if (res.code == 200) {
    hasHospitalList.value = res.data?.content;
    hospitalTotal.value = res.data?.totalElements;
  }
};
// 组件挂载完毕：先发一次请求
onMounted(() => {
  fetchHospitalListData();
});

// 分页
const handleSizeChange = () => {
  currentPage.value = 1;
  fetchHospitalListData();
};
const handleCurrentChange = () => {
  fetchHospitalListData();
};
// 可抽取
const $router = useRouter();
const goToHospital = (hoscode: any) => {
  // console.log(item.hoscode);
  $router.push({ path: '/hospital/register', query: { hoscode } });
};
</script>
<template>
  <div class="home">
    <!-- 轮播图 -->
    <Carousel></Carousel>
    <!-- 搜索 -->
    <Search></Search>
    <!-- 医院分类:等级 地区 | 常见科室 :科室名称列表 查看全部 平台公告 停诊通知-->
    <!-- 医院列表 -->
    <el-row :gutter="20">
      <el-col :span="20">
        <Level ref="levelRef"></Level>
        <div class="card">
          <div @click="goToHospital(item.hoscode)" class="card-item" v-for="item in hasHospitalList" :key="item.id">
            <HospitalCard :hospitalInfo="item"></HospitalCard>
          </div>
        </div>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="hospitalTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
      <el-col :span="4">
        <HospitalRight></HospitalRight>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped lang="scss">
.home {
  box-sizing: border-box;
  .el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .card {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .card-item {
      width: calc((100% - 40px) / 2);
      margin-bottom: 20px;
      &:nth-child(2n + 1) {
        margin-right: 10px;
      }
      &:nth-child(2n) {
        margin-left: 10px;
      }
    }
  }
  .el-pagination {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
  }
  .el-pagination.is-background .btn-next.is-active,
  .el-pagination.is-background .btn-prev.is-active,
  .el-pagination.is-background .el-pager li.is-active {
    background-color: red !important;
  }
}
</style>
